const scrollElt = document.querySelector('.header_fixed')
const newTop = document.querySelector('.xtx_topnav')
const noneHeader = document.querySelector('.none_header')
const rotograph = document.querySelector('.rotograph')
window.addEventListener('scroll', function () {
    if (document.documentElement.scrollTop > newTop.offsetHeight * 1.5) {
        scrollElt.style.display = 'block'
        rotograph.style.marginTop = scrollElt.offsetHeight + newTop.offsetHeight + 'px'
        noneHeader.style.display = 'none'
        scrollElt.style.top = 0
    } else {
        noneHeader.style.display = 'block'
        scrollElt.style.display = 'none'
        rotograph.style.marginTop = 0
        scrollElt.style.top = '-80px'
    }
})
window.addEventListener('scroll', function () {
    if (document.documentElement.scrollTop >= 1) {
        this.document.querySelector('.display_none').style.display = 'none'
        this.document.querySelector('.display_block').style.display = 'block'
    } else {
        this.document.querySelector('.display_none').style.display = 'block'
        this.document.querySelector('.display_block').style.display = 'none'
    }
})
function dropDownBox() {
    const arr = [
        [
            {
                url: 'https://yanxuan.nosdn.127.net/3102b963e7a3c74b9d2ae90e4380da65.png?quality=95&imageView',
                title: '茶咖酒具'
            },
            {
                url: 'https://yanxuan.nosdn.127.net/45b50d5f8afbd6fdef97314647dcb7db.png?quality=95&imageView',
                title: '水具杯壶'
            },
            {
                url: 'https://yanxuan.nosdn.127.net/b42a85ef15f856081ea9f49e5f6893e2.png?quality=95&imageView',
                title: '宠物食品'
            },
            {
                url: 'https://yanxuan.nosdn.127.net/e766b09029ca00680d1e651b5cdc42bd.png?quality=95&imageView',
                title: '宠物用品'
            }
        ],
        [
            {
                url: 'https://yanxuan.nosdn.127.net/79b904ccd106d3875a90d4430f2e8ad2.png?quality=95&imageView',
                title: '网易黑猪'
            },
            {
                url: 'https://yanxuan.nosdn.127.net/cc361cf40d4f81c7eccefed1ad18face.png?quality=95&imageView',
                title: '水产海鲜'
            },
            {
                url: 'https://yanxuan.nosdn.127.net/c11f5457dfb38e76f60100c87ecdf0cd.png?quality=95&imageView',
                title: '全球美食'
            },
            {
                url: 'https://yanxuan.nosdn.127.net/fe8e9c985d538cc1c1ced011a67ffe69.png?quality=95&imageView',
                title: '冷冻冷藏'
            }
        ],
        [
            {
                url: 'https://yanxuan.nosdn.127.net/57e4f01648100ec94c7bfee35171fdcb.png?quality=95&imageView',
                title: '室外拖鞋'
            },
            {
                url: 'https://yanxuan.nosdn.127.net/3f32a302a4cb4afe7d5d89b666566e60.png?quality=95&imageView',
                title: '春夏潮鞋'
            },
            {
                url: 'https://yanxuan.nosdn.127.net/b9e005aef67f1a93828847b071114296.png?quality=95&imageView',
                title: '飞织系列'
            },
            {
                url: 'https://yanxuan.nosdn.127.net/cc2470afdf28b9a84639703b592da6f7.png?quality=95&imageView',
                title: '一脚蹬懒人系列'
            }
        ],
        [
            {
                url: 'https://yanxuan.nosdn.127.net/1f0089afcec911db7202fbcdae57d5f8.png?quality=95&imageView',
                title: 'T恤/polp/衬衫'
            },
            {
                url: 'https://yanxuan.nosdn.127.net/bf9f0a32c2b79c6d29de7d0843888b48.png?quality=95&imageView',
                title: '卫衣/毛衫'
            },
            {
                url: 'https://yanxuan.nosdn.127.net/8a4be0d65d4a2f3ba36b3af8ee8d9414.png?quality=95&imageView',
                title: '外套/套装'
            },
            {
                url: 'https://yanxuan.nosdn.127.net/773677cc0922628152a9b3cbd862426f.png?quality=95&imageView',
                title: '连体衣/礼盒'
            }
        ],
        [
            {
                url: 'https://yanxuan.nosdn.127.net/718318c0d3b55d011fcb7c7c843902ce.png?quality=95&imageView',
                title: '家庭清洁'
            },
            {
                url: 'https://yanxuan.nosdn.127.net/dfb6142de1bd2f59b251eb8f7c7ea2fb.png?quality=95&imageView',
                title: '浴室用品'
            },
            {
                url: 'https://yanxuan.nosdn.127.net/55d927e337c1f6d394359e99ef72a621.png?quality=95&imageView',
                title: '餐厨清洁'
            },
            {
                url: 'https://yanxuan.nosdn.127.net/949c5f8b077cf386ff9f1f18bec3408b.png?quality=95&imageView',
                title: '毛巾浴巾'
            }
        ],
        [
            {
                url: 'https://yanxuan.nosdn.127.net/00d79ce9acb7285b15f83c92940b557f.png?quality=95&imageView',
                title: '卫浴用品'
            },
            {
                url: 'https://yanxuan.nosdn.127.net/b26d34d052d9c780d695bf4b601bfffc.png?quality=95&imageView',
                title: '高级珠宝'
            },
            {
                url: 'https://yanxuan.nosdn.127.net/7daf27044470881e8839b46a262d958c.png?quality=95&imageView',
                title: '时尚配搭'
            },
            {
                url: 'https://yanxuan.nosdn.127.net/c01b0f1075158c5a5eb1ff9a33347bb8.png?quality=95&imageView',
                title: '数码电器'
            }
        ],
        [
            {
                url: 'https://yanxuan.nosdn.127.net/f5797ca77cfe413e7753ec69f9bd4bb1.png?quality=95&imageView',
                title: '影音娱乐'
            },
            {
                url: 'https://yanxuan.nosdn.127.net/da0ac345e98c04594b697b56ebc373a5.png?quality=95&imageView',
                title: '乐器'
            },
            {
                url: 'https://yanxuan.nosdn.127.net/3f45fbcdac7e8532b6a1570e6d7fe171.png?quality=95&imageView',
                title: '车载用品'
            },
            {
                url: 'https://yanxuan.nosdn.127.net/801583d2f58274b13dc6a03daed1c3c9.png?quality=95&imageView',
                title: '办公文具'
            }
        ],
        [
            {
                url: 'https://yanxuan.nosdn.127.net/2b1edfa6d05445de684b7df854895c0b.png?quality=95&imageView',
                title: '登机箱'
            },
            {
                url: 'https://yanxuan.nosdn.127.net/cd44477ca9614ed81ffb58c5cacdab26.png?quality=95&imageView',
                title: '托运箱'
            },
            {
                url: 'https://yanxuan.nosdn.127.net/141625f78404b8c81e431084a139b836.png?quality=95&imageView',
                title: '出行配件'
            },
            {
                url: 'https://yanxuan.nosdn.127.net/c6ff77bbb7d0f39622da300f6f5f5442.png?quality=95&imageView',
                title: '户外运动鞋'
            }
        ],
        [
            {
                url: 'https://yanxuan.nosdn.127.net/da0ac345e98c04594b697b56ebc373a5.png?quality=95&imageView',
                title: '乐器杂项'
            }
        ]
    ]
    document.querySelector('.principal .xtx_navs').addEventListener('mouseover', function (e) {
        if (e.target.className === 'entrust') {
            document.querySelector('.principal .drop_down_box').style.height = '132px'
        }
        if (e.target.className === 'entrust') {
            document.querySelector('.principal .drop_down_box ul').innerHTML = ''
            let num = 0
            for (let i = 0; i < (arr[e.target.dataset.index]).length; i++) {
                const newLi = document.createElement('li')
                newLi.innerHTML = `<a href="#">
                                        <img src="${(arr[e.target.dataset.index])[num].url}" alt="">
                                        <p class="bubbling">${(arr[e.target.dataset.index])[num].title}</p>
                                    </a>`
                newLi.classList.add('bubbling')
                document.querySelector('.principal .drop_down_box ul').appendChild(newLi)
                num++
            }
        }
    })
    document.querySelector('.principal .xtx_navs').addEventListener('mouseout', function (e) {
        if (e.target.className === 'entrust') {
            document.querySelector('.principal .drop_down_box').style.height = '0px'
        }
    })
    document.querySelector('.principal .drop_down_box').addEventListener('mouseover', function () {
        document.querySelector('.principal .drop_down_box').style.height = '132px'
    })
    document.querySelector('.principal .drop_down_box').addEventListener('mouseout', function () {
        document.querySelector('.principal .drop_down_box').style.height = '0px'
    })

    document.querySelector('.hidden .xtx_navs').addEventListener('mouseover', function (e) {
        if (e.target.className === 'entrust') {
            document.querySelector('.hidden .drop_down_box').style.height = '132px'
        }
        if (e.target.className === 'entrust') {
            document.querySelector('.hidden .drop_down_box ul').innerHTML = ''
            let num = 0
            for (let i = 0; i < (arr[e.target.dataset.index]).length; i++) {
                const newLi = document.createElement('li')
                newLi.innerHTML = `<a href="#">
                                        <img src="${(arr[e.target.dataset.index])[num].url}" alt="">
                                        <p class="bubbling">${(arr[e.target.dataset.index])[num].title}</p>
                                    </a>`
                newLi.classList.add('bubbling')
                document.querySelector('.hidden .drop_down_box ul').appendChild(newLi)
                num++
            }
        }
    })
    document.querySelector('.hidden .xtx_navs').addEventListener('mouseout', function (e) {
        if (e.target.className === 'entrust') {
            document.querySelector('.hidden .drop_down_box').style.height = '0px'
        }
    })
    document.querySelector('.hidden .drop_down_box').addEventListener('mouseover', function () {
        document.querySelector('.hidden .drop_down_box').style.height = '132px'
    })
    document.querySelector('.hidden .drop_down_box').addEventListener('mouseout', function () {
        document.querySelector('.hidden .drop_down_box').style.height = '0px'
    })


    const wrapperTop = document.querySelector('.wrapper').offsetTop
    const fixed = document.querySelector('.header_fixed .wrapper')
    window.addEventListener('scroll', function () {
        if (document.documentElement.scrollTop > wrapperTop) {
            this.document.querySelector('.drop_down_box').style.left = fixed.offsetLeft + 'px'
            this.document.querySelector('.drop_down_box').style.top = fixed.clientHeight + 'px'
            this.document.querySelector('.drop_down_box').style.position = 'fixed'
            this.document.querySelector('.drop_down_box').style.border = '1px solid #dadada'
        } else {
            this.document.querySelector('.drop_down_box').style.left = 0
            this.document.querySelector('.drop_down_box').style.top = '108px'
            this.document.querySelector('.drop_down_box').style.position = 'absolute'
            this.document.querySelector('.drop_down_box').style.border = 0
        }
    })
}
dropDownBox()
function shoppingCart() {
    document.querySelector('.xtx_search_cart').addEventListener('mouseenter', function () {
        document.querySelector('.shopping_cart').style.height = '400px'
        document.querySelector('.shopping_cart').style.paddingTop = '10px'
        document.querySelector('.shopping_cart').style.opacity = 1
        document.querySelector('.triangle').style.opacity = 1
        document.querySelector('.triangle').style.height = '15px'
    })
    document.querySelector('.xtx_search_cart').addEventListener('mouseleave', function () {
        document.querySelector('.shopping_cart').style.height = '0px'
        document.querySelector('.shopping_cart').style.paddingTop = '0px'
        document.querySelector('.shopping_cart').style.opacity = 0
        document.querySelector('.triangle').style.opacity = 0
        document.querySelector('.triangle').style.height = 0
    })
    document.querySelector('.shopping_cart').addEventListener('mouseenter', function () {
        document.querySelector('.shopping_cart').style.height = '400px'
        document.querySelector('.shopping_cart').style.paddingTop = '10px'
        document.querySelector('.shopping_cart').style.opacity = 1
        document.querySelector('.triangle').style.opacity = 1
        document.querySelector('.triangle').style.height = '15px'
    })
    document.querySelector('.shopping_cart').addEventListener('mouseleave', function () {
        document.querySelector('.shopping_cart').style.height = '0px'
        document.querySelector('.shopping_cart').style.paddingTop = '0px'
        document.querySelector('.shopping_cart').style.opacity = 0
        document.querySelector('.triangle').style.opacity = 0
        document.querySelector('.triangle').style.height = 0
    })
    document.querySelector('.triangle').addEventListener('mouseenter', function () {
        document.querySelector('.shopping_cart').style.height = '400px'
        document.querySelector('.shopping_cart').style.paddingTop = '10px'
        document.querySelector('.shopping_cart').style.opacity = 1
        document.querySelector('.triangle').style.opacity = 1
        document.querySelector('.triangle').style.height = '15px'
    })
    document.querySelector('.triangle').addEventListener('mouseleave', function () {
        document.querySelector('.shopping_cart').style.height = '0px'
        document.querySelector('.shopping_cart').style.paddingTop = '0px'
        document.querySelector('.shopping_cart').style.opacity = 0
        document.querySelector('.triangle').style.opacity = 0
        document.querySelector('.triangle').style.height = 0
    })


}
shoppingCart()

const strrr = localStorage.getItem('mes')
let goodArr = null
if (strrr) {
    goodArr = JSON.parse(strrr)
} else {
    goodArr = []
}

function shoppingsss(arr) {
    const newArr = arr.reduce((prev, item, index) => {
        if (item.goodsSize) {
            return prev + `
            <div class="div_entrust">
                                    <a href="../html/shoppingCar.html">
                                        <img src="${item.goodsPicture}"
                                            alt="">
                                        <div>
                                            <p>${item.goodsName}</p>
                                            <p>颜色： <i>${item.titleFir}</i> 尺码： <i>${item.goodsSize}</i></p>
                                        </div>
                                        <div>
                                            <p>￥<i>${item.goodsPrice}</i>元 </p>
                                            <p>X <i>${item.goodsCount}</i></p>
                                        </div>
                                    </a>
                                    <div class="shut_down"><i class="shut_downI" data-index='${index}'>x</i></div>
                                </div>`
        } else {
            return prev + `
            <div class="div_entrust">
                                    <a href="../html/shoppingCar.html">
                                        <img src="${item.goodsPicture}"
                                            alt="">
                                        <div>
                                            <p>${item.goodsName}</p>
                                            <p>颜色： <i>${item.titleFir}</i> </p>
                                        </div>
                                        <div>
                                            <p>￥<i>${item.goodsPrice}</i>元 </p>
                                            <p>X <i>${item.goodsCount}</i></p>
                                        </div>
                                    </a>
                                    <div class="shut_down"><i class="shut_downI" data-index='${index}'>x</i></div>
                                </div>`
        }

    }, "")
    document.querySelector('.commodity>div').innerHTML = newArr

    let num = arr.reduce((prev, item) => prev + item.goodsCount, 0)
    document.querySelector('.quantity_of_goods').innerHTML = num
    document.querySelector('.red_quantity').innerHTML = num
    const money = arr.reduce((prev, item) => prev + item.goodsCount * item.goodsPrice, 0)
    document.querySelector('.commodity_price').innerHTML = money
}

shoppingsss(goodArr)

document.querySelector('.commodity').addEventListener('click', function (e) {
    if (e.target.className === 'shut_downI') {
        goodArr.splice(e.target.dataset.index, 1)
        localStorage.setItem('mes', JSON.stringify(goodArr))
        shoppingsss(goodArr)
    }
})
shoppingsss(goodArr)

